<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="layui.css">
  <script src="./layui.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    /* 头部导航样式 */
    /*#region*/
    .headbox {
      position: relative;
      z-index: 2000;
      width: 100%;
      height: 35px;
      background-color: #f5f5f5;
    }

    .headcontent {
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      width: 1460px;
      /* background-color: skyblue; */
      font-size: 12px;
      height: 35px;
      line-height: 35px;
    }

    .headcity {
      color: #333;
    }

    .headcity span {
      color: #0cbab2;
    }

    .headcity img {
      width: 18px;
      height: 18px;
      vertical-align: middle;
    }

    .headnav ul {
      display: flex;
    }

    .headnav ul li a {
      color: #999;
      padding: 0 10px 0 14px;
      border-right: 1px solid #999;
    }

    .headnav ul li img {
      width: 12px;
      height: 8px;
    }

    .headnav ul li a:hover {
      position: relative;
      color: #0cbab2;
    }

    .headnav ul li a div {
      color: #999;
      /* text-align: center; */
      display: none;
      padding-left: 15px;
      position: absolute;
      width: 100px;
      height: 90px;
      background-color: #f5f5f5;
      z-index: 100;
    }

    .headnav ul li a:hover div {
      display: block;
    }

    .headnav .li1 a:first-child {
      border: 0;
    }

    .headnav ul>li:last-child a {
      border: 0;
      color: red;
    }

    .headnav ul>li:last-child a span {
      text-decoration: underline;
    }

    /*#endregion*/

    /* logo位置导航栏 */
    /*#region*/
    .logonav {
      position: sticky;
      top: 0;
      z-index: 1000;
      background-color: #fff;
      width: 100%;
      height: 80px;
      /* background-color: skyblue; */
    }

    .logonavcontent {
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      width: 1460px;
      height: 80px;
      /* background-color: #0cbab2; */
    }

    .logobox {
      display: flex;
      justify-content: space-between;
      width: 289px;
      height: 51px;
      margin-top: 16px;
    }

    .logobox i {
      width: 132px;
      height: 47px;
    }

    .logobox i {
      margin-top: 4px;
      background: url(images/jlt.png) no-repeat 0 -261px;
      /* background-image: url(images/jlt.png);
      background-repeat: no-repeat; */
      background-size: 457px 370px;
      /* background-position: 0 -208px; */
      /* background-size: 2; */
      zoom: 1;
    }

    .logobox img {
      vertical-align: middle;
      width: 145px;
      height: 51px;
    }

    .logonavmain,
    .logonavmain ul {
      display: flex;
      width: 766px;
      height: 80px;
    }

    .logonavmain ul li {
      padding: 22px 15px 0 16px;
      margin-right: 30px;
    }

    .logonavmain ul li:last-child {
      margin-right: 0;
    }

    .logonavmain ul li a {
      font-size: 16px;
      height: 38px;
      line-height: 38px;
      color: #333;
    }

    .logonavmain ul li a img {
      margin-left: 5px;
      width: 18px;
      height: 18px;
      vertical-align: middle;
    }

    .logonavmain ul li a div {
      left: 0;
      bottom: -200px;
      color: #999;
      display: none;
      padding-left: 15px;
      box-sizing: border-box;
      position: absolute;
      width: 1519px;
      height: 200px;
      background-color: #f5f5f5;
      z-index: 100;
    }

    .logonavmain ul li:first-child a {
      color: #0cbab2;
    }

    .logonavmain ul li a:hover {
      color: #0cbab2;
    }

    .logonavmain ul li a:hover div {
      display: block;
    }

    .logosearch {
      position: relative;
      width: 268px;
      height: 79px;
      line-height: 79px;
    }

    .logosearch input {

      width: 224px;
      height: 14px;
      padding: 9px 32px 9px 8px;
      outline: none;

    }

    .logosearch img {
      right: 10px;
      top: 30px;
      width: 21px;
      height: 21px;
      position: absolute;
    }

    /*#endregion*/

    .bottom {
      color: #828789;
      background-color: #1f1f1f;
      padding: 30px 0;
    }

    .bottom .ul1 {
      display: flex;
      height: 35px;
    }

    .bottommain,
    .bottomcompany {
      width: 1460px;
      margin: 0 auto;
    }

    .bottom .ul1 li {
      width: 90px;
      height: 35px;
      line-height: 35px;
      margin-right: 10px;
      background-color: #384144;
      color: #828789;
      text-align: center;
    }

    .bottom .ul1 li:nth-child(1) {
      color: white;
    }

    .bottom .ul2 {
      margin-top: 21px;
      display: flex;
      flex-wrap: wrap;
      border-bottom: 1px solid #828789;
    }

    .bottom .ul2 li {
      margin: 0 14px 11px 0;
      font-size: 12px;
    }

    .bottomcompany {
      position: relative;
      margin-top: 20px;
    }

    .bottomcompany ul {
      display: flex;
    }

    .bottomcompany ul li {
      margin-right: 17px;
      color: white;
    }

    .bottomcompany p {
      font-size: 12px;
      margin-top: 23px;
    }

    .bottomcompany p:last-child img {
      height: 21px;
      vertical-align: middle;
    }

    .bottomcompany p:last-child span {
      display: block;
    }

    .bottomcompany .box11 {
      position: absolute;
      right: 300px;
      bottom: 50px;
    }

    .bottomcompany .box22 {
      position: absolute;
      right: 150px;
      bottom: 50px;
    }

    .bottomcompany .box11 img,
    .bottomcompany .box11 {
      width: 100px;
      height: 100px;
    }

    .bottomcompany .box22 img,
    .bottomcompany .box22 {
      width: 100px;
      height: 100px;
    }

    .div22 {
      width: 1220px;
      margin: 0 auto 10px;
    }

    .list {
      width: 1220px;
      margin: 11px 0 21px;
      border: 1px solid #ccc;
      margin: 0 auto;
    }

    .listitem {
      display: flex;
      width: 1220px;
      height: 47px;
      border-bottom: 1px solid #ccc;
    }

    .listitem:last-child {
      border: 0;
    }

    .item {
      padding: 12px 20px;
    }

    .listitem div:nth-child(1) {
      background-color: #f5eaea;
    }

    .imgcontent {
      width: 1220px;
      margin: 0 auto;
    }

    .imglist {
      display: flex;
      flex-wrap: wrap;
      width: 1240px;
    }

    .imglist li {
      width: 293px;
      height: 302px;
      margin-top: 15px;
      padding-right: 15px;
    }

    .imglist li img {
      width: 295px;
      height: 210px;
    }

    .imglist li p:nth-child(2) {
      font-size: 16px;
      margin-top: 15px;
    }

    .imglist li p:nth-child(3) {
      font-size: 12px;
      color: #999;
      margin-top: 15px;
    }

    .fenye {
      width: 1220px;
      margin: 0 auto 30px;
      position: relative;
    }
  </style>
</head>

<body>
  <!-- 顶部登录注册导航栏 -->
  <div class="headbox">
    <div class="headcontent">
      <!-- 城市信息 -->
      <div class="headcity">
        <img src="images/dizhi.png" alt="">
        郑州
        <span>[切换]</span>
      </div>
      <!-- 头部导航栏 -->
      <div class="headnav">
        <ul>
          <li class="li1">
            <a href="#">登录</a>
            <a href="#">注册</a>
          </li>

          <li>
            <a href="#">我的土巴兔<img src="images/下拉.png" alt="">
              <div>我的土巴兔</div>
            </a>
          </li>
          <li>
            <a href="#">商家中心<img src="images/下拉.png" alt="">
              <div>商家中心</div>
            </a>
          </li>
          <li>
            <a href="#">建材中心<img src="images/下拉.png" alt="">
              <div>建材中心</div>
            </a>
          </li>
          <li>
            <a href="#">创作者中心</a>
          </li>
          <li>
            <a href="#">图满意云设计</a>
          </li>
          <li>
            <a href="#">咨询热线：<span>4006-900-288</span></a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- logo位置导航栏 -->
  <div class="logonav">
    <div class="logonavcontent">
      <div class="logobox">
        <i></i>
        <img src="images/logo2.gif" alt="">
      </div>
      <div class="logonavmain">
        <ul>
          <li>
            <a href="#">首页</a>
          </li>
          <li>
            <a href="#">效果图<img src="images/下拉 (1).png" alt="">
              <div>效果图</div>
            </a>
          </li>
          <li>
            <a href="#">装修公司<img src="images/下拉 (1).png" alt="">
              <div>装修公司</div>
            </a>
          </li>
          <li>
            <a href="#">装修攻略<img src="images/下拉 (1).png" alt="">
              <div>装修攻略</div>
            </a>
          </li>
          <li>
            <a href="#">更多<img src="images/下拉 (1).png" alt="">
              <div>更多</div>
            </a>
          </li>
          <li>
            <a href="#">下载app<img src="images/手机.png" alt=""></a>
          </li>
        </ul>
      </div>
      <div class="logosearch">
        <input type="text" placeholder="搜装修公司" class="text">
        <img src="images/搜索.png" alt="">
      </div>
    </div>
  </div>

  <div class="div22">
    <span class="layui-breadcrumb" style="visibility: visible;">
      <a href="">装修效果图</a><span lay-separator="">></span>
      <a><cite>3D设计</cite></a>
    </span>
  </div>

  <div class="list">
    <div class="listitem">
      <div class="item">
        居室
      </div>
      <div class="item">全部</div>
      <div class="item">一局</div>
      <div class="item">二局</div>
      <div class="item">三局</div>
      <div class="item">四局</div>
      <div class="item">无惧</div>
      <div class="item">一局</div>
      <div class="item">二局</div>
      <div class="item">三局</div>
      <div class="item">四局以上</div>
      <div class="item">无惧</div>
    </div>
    <div class="listitem">
      <div class="item">
        面积
      </div>
      <div class="item">60平方米</div>
      <div class="item">60-90平方米</div>
      <div class="item">90-120平方米</div>
      <div class="item">120-140平方米</div>
      <div class="item">140-160平方米</div>
      <div class="item">160-180平方米</div>
      <div class="item">180-200平方米</div>
    </div>
    <div class="listitem">
      <div class="item">
        风格
      </div>
      <div class="item">全部</div>
      <div class="item">现代</div>
      <div class="item">流行</div>
      <div class="item">欧式</div>
      <div class="item">田园</div>
      <div class="item">地中海</div>
      <div class="item">混搭</div>
      <div class="item">二局</div>
      <div class="item">三局</div>
      <div class="item">无惧</div>
    </div>
    <div class="listitem">
      <div class="item">
        价格
      </div>
      <div class="item">全部</div>
      <div class="item">三万以下</div>
      <div class="item">3-5万</div>
      <div class="item">5-8万</div>
      <div class="item">8-10万</div>
      <div class="item">10-15万</div>
      <div class="item">15-18万</div>
      <div class="item">18-21万</div>
      <div class="item">21-25万</div>
      <div class="item">100万以上</div>
    </div>
  </div>

  <div class="imgcontent">
    <ul class="imglist">
      <li><img src="images/detail/imglist1.jpg" alt="">
        <p>绿都澜湾79平方现代风格</p>
        <p>一居&#x3000;|&#x3000;五万&#x3000;|&#x3000;现代</p>
      </li>
      <li><img src="images/detail/imglist1.jpg" alt="">
        <p>绿都澜湾79平方现代风格</p>
        <p>一居&#x3000;|&#x3000;五万&#x3000;|&#x3000;现代</p>
      </li>
      <li><img src="images/detail/imglist1.jpg" alt="">
        <p>绿都澜湾79平方现代风格</p>
        <p>一居&#x3000;|&#x3000;五万&#x3000;|&#x3000;现代</p>
      </li>
      <li><img src="images/detail/imglist1.jpg" alt="">
        <p>绿都澜湾79平方现代风格</p>
        <p>一居&#x3000;|&#x3000;五万&#x3000;|&#x3000;现代</p>
      </li>
      <li><img src="images/detail/imglist1.jpg" alt="">
        <p>绿都澜湾79平方现代风格</p>
        <p>一居&#x3000;|&#x3000;五万&#x3000;|&#x3000;现代</p>
      </li>
      <li><img src="images/detail/imglist1.jpg" alt="">
        <p>绿都澜湾79平方现代风格</p>
        <p>一居&#x3000;|&#x3000;五万&#x3000;|&#x3000;现代</p>
      </li>
      <li><img src="images/detail/imglist1.jpg" alt="">
        <p>绿都澜湾79平方现代风格</p>
        <p>一居&#x3000;|&#x3000;五万&#x3000;|&#x3000;现代</p>
      </li>
      <li><img src="images/detail/imglist1.jpg" alt="">
        <p>绿都澜湾79平方现代风格</p>
        <p>一居&#x3000;|&#x3000;五万&#x3000;|&#x3000;现代</p>
      </li>
      <li><img src="images/detail/imglist1.jpg" alt="">
        <p>绿都澜湾79平方现代风格</p>
        <p>一居&#x3000;|&#x3000;五万&#x3000;|&#x3000;现代</p>
      </li>
      <li><img src="images/detail/imglist1.jpg" alt="">
        <p>绿都澜湾79平方现代风格</p>
        <p>一居&#x3000;|&#x3000;五万&#x3000;|&#x3000;现代</p>
      </li>
      <li><img src="images/detail/imglist1.jpg" alt="">
        <p>绿都澜湾79平方现代风格</p>
        <p>一居&#x3000;|&#x3000;五万&#x3000;|&#x3000;现代</p>
      </li>
      <li><img src="images/detail/imglist1.jpg" alt="">
        <p>绿都澜湾79平方现代风格</p>
        <p>一居&#x3000;|&#x3000;五万&#x3000;|&#x3000;现代</p>
      </li>
      <li><img src="images/detail/imglist1.jpg" alt="">
        <p>绿都澜湾79平方现代风格</p>
        <p>一居&#x3000;|&#x3000;五万&#x3000;|&#x3000;现代</p>
      </li>
      <li><img src="images/detail/imglist1.jpg" alt="">
        <p>绿都澜湾79平方现代风格</p>
        <p>一居&#x3000;|&#x3000;五万&#x3000;|&#x3000;现代</p>
      </li>
      <li><img src="images/detail/imglist1.jpg" alt="">
        <p>绿都澜湾79平方现代风格</p>
        <p>一居&#x3000;|&#x3000;五万&#x3000;|&#x3000;现代</p>
      </li>
      <li><img src="images/detail/imglist1.jpg" alt="">
        <p>绿都澜湾79平方现代风格</p>
        <p>一居&#x3000;|&#x3000;五万&#x3000;|&#x3000;现代</p>
      </li>
    </ul>
  </div>

  <div class="fenye">
    <div id="test1">

    </div>
  </div>

  <div class="bottom">
    <div class="bottommain">
      <ul class="ul1">
        <li>友情链接</li>
        <li>装修美图</li>
        <li>热门公司</li>
        <li>热门攻略</li>
        <li>热门专题</li>
        <li>热门城市</li>
        <li>附近城市</li>
      </ul>
      <ul class="ul2">
        <li>郑州新房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州新房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州新房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
        <li>郑州二手房</li>
      </ul>
    </div>
    <div class="bottomcompany">
      <ul>
        <li>关于我们</li>
        <li>关于我们</li>
        <li>关于我们</li>
        <li>关于我们</li>
        <li>关于我们</li>
      </ul>
      <p>免责声明：本网站部分内容由用户自行上传，如权利人发现存在误传其作品情形，请及时与本站联系。© 2008-现在 Tubatu.com 土巴兔装修网和设计师社区 保留所有权利</p>
      <p>土巴兔装修网&#x3000;&#x3000;增值电信业务许可证：合字B2-20200129</p>
      <p><img src="images/footer_110.png" alt=""> 粤公网安备 44030502001463号<img src="images/bottomlast.png" alt=""></p>
      <div class="box11"><img src="images/t8t_app.jpg" alt=""></div>
      <div class="box22"><img src="images/t8t1.jpg" alt=""></div>

    </div>
  </div>
  <script>
    layui.use('laypage', function () {
      var laypage = layui.laypage;

      //执行一个laypage实例
      laypage.render({
        elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
        , count: 50 //数据总数，从服务端得到
        , limit: 2,
        limits: [10, 20, 30, 40, 50]
      });
    });
  </script>

</body>

</html>